<template>
	<view class="content">
		
		<ljy-header></ljy-header>
		
		<view class="index-swiper">
			<swiper indicator-dots="true" autoplay="true" interval="3000">
				<swiper-item v-for="(item,index) in swiperlist" :key="index">
					<image :src="item.image_src" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="index-nav">
			<view class="image-box" v-for="(item,index) in navlist" :key="index">
				<image :src="item.image_src" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="index-floor">
			<view class="floor-group" v-for="(item,index) in floorlist" :key="index">
				<view class="floor-title">
					<image :src="item.floor_title.image_src" mode="widthFix"></image>
				</view>
				<view class="floor-list">
					<view class="image-box" v-for="(item2,index2) in item.product_list" :key="index2">
						<image :src="item2.image_src" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			
		</view>
		<view class="white">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperlist:[],
				navlist:[],
				floorlist:[]
			}
		},
		onLoad() {
		    this.getSwiperList();
			this.getNavList();
			this.getFloorList();
		},
		methods: {
			async getSwiperList(){
				// uni.request({
				// 	url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
				// 	success:(res)=>{
				// 		console.log(res);
				// 		this.swiperlist=res.data.message;
				// 	}
				// })
				
				// this.$Https({
				// 	url:'/home/swiperdata'
				// })
				// .then((res) => {
				// 	console.log(res);
				// 	this.swiperlist=res.message;
				// })
				
				const res = await this.$Https({
					url:'/home/swiperdata'
				});
				console.log(res);
				this.swiperlist=res.message;
			},
			async getNavList(){
				// uni.request({
				// 	url:'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
				// 	success:(res)=>{
				// 		console.log(res);
				// 		this.navlist=res.data.message;
				// 	}
				// })
				
				// this.$Https({
				// 	url:'/home/catitems'
				// })
				// .then((res) => {
				// 	console.log(res);
				// 	this.navlist=res.message;
				// })
				
				const res = await this.$Https({
					url:'/home/catitems'
				});
				console.log(res);
				this.navlist = res.message;
			},
			async getFloorList(){
				const res = await this.$Https({
					url:'/home/floordata'
				});
				console.log(res);
				this.floorlist = res.message;
			}
		}
	}
</script>

<style lang="scss">
	page{
		// padding-top: 90rpx;
	}
	
	.index-swiper{
		
		swiper{
			width: 750rpx;
			height: 340rpx;
		}
		
		image{
			width: 100%;
		}
	}
	
	.index-nav{
		width: 750rpx;
		display:flex;
		
		.image-box{
			flex:1;
			padding:20rpx;
		}
		
		image{
			width: 100%;
		}
		
	}
	
	.index-floor{
		width: 750rpx;
		
		.floor-title{
			image{
				width: 100%;
			}
		}
		.floor-list{
			padding: 15rpx;
			.image-box{
				width: 240rpx;
				height: calc(240rpx * 386 / 232);
				float: left;
				
				&:nth-last-child(-n+4){
					height: calc(240rpx * 386 / 232 / 2);
					border-left: 10rpx solid #ffffff;
				}
				&:nth-child(2),&:nth-child(3){
					border-bottom: 5rpx solid #ffffff;
				}
				&:nth-child(4),&:nth-child(5){
					border-top: 5rpx solid #ffffff;
				}
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.white{height: 400rpx;}
</style>
